<template>
  <div
    style="position: relative"
    @mouseenter="visible = true"
    @mouseleave="visible = false"
  >
    <template v-if="defaultImg && visible">
      <el-button
        class="searchBtn pabs left10 top10 zind9999"
        title="放大"
        icon="el-icon-search"
        @click="viewPhotos"
        circle
        type="warning"
        size="mini"
      ></el-button>
      <el-button
        class="searchBtn pabs left0 top50 zind9999"
        title="删除"
        icon="el-icon-delete"
        @click="deletePic"
        circle
        type="danger"
        size="mini"
      ></el-button>
    </template>
    <el-upload
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
      element-loading-text="正在上传"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="avatar-uploader"
      :action="config.baseURL + 'api/upload/img'"
      :data="{ category: 6 }"
      :on-error="onError"
      :show-file-list="false"
      :on-success="_onSuccess"
      :on-change="onChange"
    >
      <!-- 未上传前默认背景 -->
      <div
        class="defaultMain"
        :style="{
          backgroundImage: `url(${userVar})`,
          width: '185px',
          height: '130px',
          backgroundRepeat: 'no-repeat',
        }"
      >
        <template v-if="defaultImg">
          <img :src="defaultImg" class="uploader-icon" />
        </template>
      </div>
    </el-upload>
  </div>
</template>
<script>
import config from "../../util/axios.config";
import {viewPhoto} from "../../util/Util"
export default {
  name: "Upload",
  props: {
    /**
     * defaultImg 就是上传后显示的图片
     */
    defaultImg: {
      type: String,
      default: "",
    },
    /**
     * isNeePost 是上传图片后，需要再请求一次服务端
     */
    isNeedPost: {
      type: Object,
      default: null,
    },
    /**
     * 多次上传区分索引
     */
    index: {
      type: Number,
      default: 0,
    },

    /**
     * onSuccess 是1次上传后的回调
     */
    onSuccess: {
      type: Function,
      default: function () {},
    },

    /**
     * 删除图片
     */
    ondeletePic: {
      type: Function,
      default: function () {},
    },
  },
  data() {
    return {
      loading: false,
      config: {},
      userVar: require("../../assetsu841.png"),
    };
  },
  methods: {
    /**
     * 放大图片
     */
    viewPhotos(e) {
      if (e && e.preventDefault) {
        e.preventDefault();
      }
      viewPhoto($, this.defaultImg, {});
    },
    
    /**
     * 删除图片
     */
    deletePic() {
      this.ondeletePic();
    },

    /**
     * 上传回调
     */
    _onSuccess(res, file) {
      this.loading = false;
      let index = this.index;
      this.onSuccess(res, file, index);
    },

    /**
     *
     */
    onChange(file) {
      this.loading = file.status != "success";
    },

    /**
     * Error
     */
    onError(err) {
      this.loading = false;
      this.$message({
        showClose: true,
        message: err,
        type: "warning",
      });
    },
  },
   mounted() {
    this.config = config;
  },
};
</script>

<style>
.pabs {
  position: absolute;
}
.left0 {
  left: 0px;
}
.left10 {
  left: 10px;
}
.top10 {
  top: 10px;
}
.top50 {
  top: 50px;
}
.zind9999 {
  z-index: 9999;
}
</style>